<template>
  <div>
    <a-card :bordered="false" style="position: relative; margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item">
            <a-form-model-item label="关键词">
              <a-input v-model="form.name" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="历史记录">
              <a-input v-model="form.history" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="状态">
              <a-select style="width: 100%" v-model="form.status" placeholder="请选择">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">启用</a-select-option>
                <a-select-option value="1">禁用</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div style="margin-bottom: 20px">
        <a-button type="primary" @click="onHandle()">关键词配置</a-button>
        <a-button @click="onMState(0)" :disabled="isDisabled" style="margin-left: 20px">启用</a-button>
        <a-button @click="onMState(1)" :disabled="isDisabled" style="margin-left: 20px">禁用</a-button>
        <a-button @click="onDelete()" :disabled="isDisabled" style="margin-left: 20px">删除</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showColSettings="true"
          :hideColSettings="['action']"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        >
          <template v-slot:colSettings>
            <a-button class="table-custom-cols"> 字段配置 </a-button>
          </template>
          <template slot="name" slot-scope="text">
            <span v-if="text.length <= 10">{{ text }}</span>
            <j-ellipsis v-else :value="text" :length="10" />
          </template>
          <template slot="history" slot-scope="text">
            <span v-if="text.length <= 10">{{ text }}</span>
            <j-ellipsis v-else :value="text" :length="10" />
          </template>
          <template slot="status" slot-scope="text">
            <span style="color: #03c016" v-if="text === 0">启用</span>
            <span style="color: red" v-if="text === 1">禁用</span>
          </template>

          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a @click="onHandle(record)" type="link" style="padding: 0 5px">编辑</a>
            <a @click="onState(record)" v-if="record.status == 1" type="link" style="padding: 0 5px">启用</a>
            <a @click="onState(record)" v-if="record.status == 0" type="link" style="padding: 0 5px">禁用</a>
            <a @click="onDelete(record)" type="link" style="padding: 0 5px">删除</a>
            <!-- <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete()">
              <a>删除</a>
            </a-popconfirm> -->
          </template>
        </custom-table>
      </div>
      <!--弹窗区域 -->
      <ConfigModal ref="configModalId" @ok="onAddOk" />
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as informationApi from '@/api/information.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import ConfigModal from './components/ConfigModal'
export default {
  components: {
    CustomTable,
    ConfigModal,
  },
  data() {
    return {
      moment,
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      loading: false,
      isDisabled: true,
      reloading: false,
      selectKeys: [],
      form: {},
      columns: [
        {
          title: '关键词',
          dataIndex: 'name',
          // width: 80,
          align: 'center',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '历史记录',
          dataIndex: 'history',
          // width: 115,
          align: 'center',
          scopedSlots: { customRender: 'history' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          // width: 115,
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          // width: 80,
          align: 'center',
          // customRender: (text) => {
          //   return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ''
          // },
        },
        {
          title: '操作',
          width: 240,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: [
        // { attentionStatus: '淘宝咸鱼', type: '1' },
        // { attentionStatus: '微博贴吧', type: '2' },
      ],
    }
  },
  created() {},
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.$nextTick(() => {
        this.reload()
      })
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      informationApi
        .smuInfoKeywordList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onState(record) {
      let that = this
      let title = ''
      let status = ''
      if (record.status == 1) {
        title = '确定要启动吗'
        status = 0
      } else {
        title = '确定要禁用吗'
        status = 1
      }
      let params = {
        ids: record.id,
        status: status,
      }
      this.$confirm({
        title: title,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          informationApi.editBatch(params).then(() => {
            that.$message.success('操作成功')
            that.refreshTable()
          })
        },
      })
    },
    onMState(n) {
      let that = this
      let title = ''
      let status = ''
      let flag = true
      let selectRow = this.$refs.table.getSelectedRows()
      if (n == 0) {
        for (var i = 0; i < selectRow.length; i++) {
          if (selectRow[i].status != 1) {
            flag = false
            this.$message.warning('选项中含有启用项')
            break
          }
        }
        title = '确定要全部启动吗'
        status = 0
      } else {
        for (var i = 0; i < selectRow.length; i++) {
          if (selectRow[i].status != 0) {
            flag = false
            this.$message.warning('选项中含有禁用项')
            break
          }
        }
        title = '确定要全部禁用吗'
        status = 1
      }
      if (flag) {
        let params = {
          ids: this.selectKeys.join(),
          status: status,
        }
        this.$confirm({
          title: title,
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            informationApi.editBatch(params).then(() => {
              that.$message.success('操作成功')
              that.refreshTable()
            })
          },
        })
      }
    },
    onHandle(record) {
      if (record) {
        //编辑
        this.$refs.configModalId.show(record)
      } else {
        //新增
        this.$refs.configModalId.show()
      }
    },
    onDelete(record) {
      let that = this
      this.$confirm({
        title: `确定要删除吗?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          if (record) {
            informationApi.keywordDel({ id: record.id }).then(() => {
              that.$message.success('删除成功')
              that.refreshTable()
            })
          } else {
            let idsStr = that.selectKeys.join()
            informationApi.keywordDelBatch({ ids: idsStr }).then(() => {
              that.$message.success('删除成功')
              that.refreshTable()
            })
          }
        },
      })
    },
    onAddOk() {
      this.onQuery()
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  // border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 25%;
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }
    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }
      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
      // /deep/.area-select .area-selected-trigger {
      //   line-height: 1.15;
      // }
      // /deep/.ant-select-lg .ant-select-selection--single{
      //   height: 34px;
      // }
      // /deep/.ant-select-lg .ant-select-selection__rendered {
      //   line-height: 34px;
      //   font-size: 14px;
      // }
    }
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
/deep/.ant-dropdown-menu-item {
  text-align: center;
  border-bottom: 1px #f5f5f5 solid;
  &:last-child {
    border-bottom: 0;
  }
}
/deep/.anticon.anticon-down {
  font-size: 14px !important;
}

.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #02a7f0;
    padding-right: 6px;
  }
  .text_color_2 {
    color: #f59a23;
    padding-right: 6px;
  }
  .text_color_3 {
    color: #d9001b;
    padding-right: 6px;
  }
  .ant-tag-cust-green {
    background-color: #f2fee6;
    border-color: #c2fa90;
  }
  .ant-tag.ant-tag-level {
    display: block;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 0;
    &.level_1 {
      color: #3fb674;
      background-color: #e4fff0;
    }
    &.level_2 {
      color: #56acf2;
      background-color: #dceefd;
    }
    &.level_3 {
      color: #f9b01e;
      background-color: #fef3dc;
    }
    &.level_4 {
      color: #fd586c;
      background-color: #ffe9e7;
    }
    &.level_5 {
      color: #b40aba;
      background-color: #fecdff;
    }
  }
}
</style>
